@tailwind base;
@tailwind components;
@tailwind utilities;

*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 1.125rem;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
    /*padding: 20px 20px 60px;*/
    margin: 0 auto;
    background-color: var(--backgroundColor) !important;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


a {
    color: inherit;
    text-decoration: none;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.header {
    padding: 0 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--headerColor) !important;
}

.header a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.footer {
    padding: 0 10%;
    width: 100%;
    height: auto;
    color: var(--white) !important;
    background-color: var(--footerColor) !important;
}

.footer a {
    display: flex;
    /*justify-content: center;*/
    /*align-items: center;*/
    flex-grow: 1;
    color: var(--white) !important;
}
